<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动化测试平台</title>
    <script src="index.js" type="javascript">// 运行index.js里面所有的文件 把这里面的代码全部执行
    </script>
    <style>
        /*设置div块元素id为title的css格式*/
        #title { /*定位id用"#" */
            background-color: #20A0FF; /*设置标题栏的底色*/
            height: 120px; /*设置标题栏的高度*/
        }

        /*设置id为title的子div块的css格式*/
        #title div {
            width: 230px; /*设置标题的宽度*/
            text-align: center; /*设置文本内容居中*/
            height: 100%; /*设置div宽度和父级一致*/
            border-right: white 1px solid; /*设置左边框颜色、宽度*/
        }

        /*设置id为title的子div块下的span标签的css格式*/
        #title div span {
            display: inline-block; /*设置父级元素为内联块元素，可以使用margin*/
            color: #FFFFFF; /*设置字体颜色为白色*/
            font-size: 25px; /*设置字体大小*/
            line-height: 25px; /*设置字体行高*/
            height: 25px; /*设置当前元素高度*/
            width: 175px; /*设置当前元素宽度*/
            margin-top: 45px; /*设置向下平移保持居中*/

        }

        ul {
            list-style: none; /*去掉列表之前的点*/
        }

        /*去掉超链接的下划线*/
        a {
            text-decoration: none;
        }

        /*设置内容居中*/
        .main {
            width: 100%;
        }

        .tab {
            height: 60px; /*设置ul高度*/
            border: 1px solid #ccc; /*设置ul边框线*/
        }

        /*设置被激活li的上边框颜色*/
        .tab > .active {
            border-bottom: 4px solid #20A0FF; /*设置被激活li下边框宽度颜色*/
        }

        .tab > li {
            float: left; /*设置所有的li左浮动，可以排在一行*/
            height: 60px; /*设置每个li的高度*/
            line-height: 60px; /*设置每个li的行高*/
            text-align: center; /*设置文本内容居中*/
            width: 150px; /*设置链接的宽度*/
        }

        .tab > li > a {
            font-size: 20px; /*设置文本字体大小*/
            color: #000000; /*字体颜色设置为黑色*/
        }

        .products {
            overflow: auto; /*若内容有超出，做滚动处理*/
            width: 100%;
        }

        .products > div {
            display: none; /*设置所有的div隐藏*/
        }

        .products > .show {
            display: block;
        }
    </style>
    <script>
        function menu_action(index) {
            els = document.getElementsByClassName("tabtitle");
            for (i in els) {
                if (i == index) {
                    els[i].className = "tabtitle active"
                } else {
                    els[i].className = "tabtitle"
                }
            }
            els = document.getElementsByClassName("product");
            for (j in els) {
                if (j == index) {
                    els[j].className = "product show"
                } else {
                    els[j].className = "product"
                }
            }

        }

    </script>
</head>
<body>
<div id="title">
    <div>
            <span>
                自动化测试平台
            </span>
    </div>
</div>
<div class="main">
    <div>
        <ul class="tab" id="tab">
            <li class="tabtitle active" onclick="menu_action(0)">
                <a href="javascript:">项目概况</a>
            </li>
            <li class="tabtitle" onclick="menu_action(1)">
                <a href="javascript:">Host配置</a>
            </li>
            <li class="tabtitle" onclick="menu_action(2)">
                <a href="javascript:">API接口</a>
            </li>
            <li class="tabtitle" onclick="menu_action(3)">
                <a href="javascript:">自动化测试</a>
            </li>
            <li class="tabtitle" onclick="menu_action(4)">
                <a href="javascript:">成员管理</a>
            </li>
            <li class="tabtitle" onclick="menu_action(5)">
                <a href="javascript:">项目动态</a>
            </li>
            <li class="tabtitle" onclick="menu_action(6)">
                <a href="javascript:">自动化测试报告</a>
            </li>
        </ul>
    </div>
    <div class="products" id="products">
        <div class="product show">项目概况</div>
        <div class="product">Host配置</div>
        <div class="product">API接口</div>
        <div class="product">自动化测试</div>
        <div class="product">成员管理</div>
        <div class="product">项目动态</div>
        <div class="product">自动化测试报告</div>
    </div>
</div>
</body>
</html>